<template>
	<view class="person-menu-list">
		<!-- <MenuLayout>
      <mz-list>
        <mz-list-item
          v-for="(item) in btnList"
          :key="item.title"
          :title="item.title"
          :show-arrow="item.showArrow"
          :right-text="item.rightText"
          @click="goto(item)"
        ></mz-list-item>
      </mz-list>
    </MenuLayout> -->
		<view class="header">
			<view class="left">
				<view class="img">
					<image :src="merchantInfo.logoUrl" mode=""></image>
				</view>
				<view class="leftName">
					<view class="shang">
						{{merchantInfo.merchantName}}
					</view>
					<view class="idName">
						ID:{{merchantInfo.serialNo}} <image src="@/static/images/other/bianjisekuai.png" mode=""></image>
					</view>
				</view>
			</view>
			<view class="right" @click="tiao">
				<image   src="@/static/images/other/shezhi.png" mode=""></image>
			</view>
		</view>
		<view class="center">
			<view class="b1">
				<view class="first">
					<view class="within1">
						<view class="title">
							我的余额
						</view>
						<view class="number">
							999.00
						</view>
					</view>
					<view class="within2">
						<view class="title">
							积分
						</view>
						<view class="number">
							9999.00
						</view>
					</view>
					<view class="within3">
						<view class="title">
							优惠券
						</view>
						<view class="number">
							666
						</view>
					</view>
				</view>
			</view>
			<view class="b2">
				<view class="shang">
					<view class="left">
						我的订单
					</view>
					<view class="right">
						全部订单 >
					</view>
				</view>
				<view class="xia">
					<view class="one1">
						<view class="img">
							<image src="../../../static/images/other/daifukuan.png" mode=""></image>
						</view>
						<view class="zi">
							待付款
						</view>
					</view>
					<view class="one2">
						<view class="img">
							<image src="../../../static/images/other/daifahuo.png" mode=""></image>
						</view>
						<view class="zi">
							待发货
						</view>
					</view>
					<view class="one3">
						<view class="img">
							<image src="../../../static/images/other/daishouhuo.png" mode=""></image>
						</view>
						<view class="zi">
							待收货
						</view>
					</view>
					<view class="one4">
						<view class="img">
							<image src="../../../static/images/other/31daipingjia.png" mode=""></image>
						</view>
						<view class="zi">
							待评价
						</view>
					</view>
					<view class="one5">
						<view class="img">
							<image src="../../../static/images/other/shouhou.png" mode=""></image>
						</view>
						<view class="zi">
							售后/退款
						</view>
					</view>
				</view>
			</view>
			<view class="b3">
				<view class="shang">
					我的服务
				</view>
				<view class="xia">
					<view class="top1">
						<view class="img">
							<image src="../../../static/images/other/dizhiguanli.png" mode=""></image>
						</view>
						<view class="zi" style="font-size: 13px;">
							地址管理
						</view>
					</view>
					<view class="top2">
						<view class="img">
							<image src="../../../static/images/other/yue.png" mode=""></image>
						</view>
						<view class="zi" style="font-size: 13px;">
							我的余额
						</view>
					</view>
					<view class="top3">
						<view class="img">
							<image src="../../../static/images/other/youhuiquan.png" mode=""></image>
						</view>
						<view class="zi" style="font-size: 13px;">
							优惠券
						</view>
					</view>
					<view class="top4">
						<view class="img">
							<image src="../../../static/images/other/wodeye_wodeshoucang.png" mode=""></image>
						</view>
						<view class="zi" style="font-size: 13px;">
							我的收藏
						</view>
					</view>
					<view class="top5">
						<view class="img">
							<image src="../../../static/images/other/jifenzhongxin.png" mode=""></image>
						</view>
						<view class="zi" style="font-size: 13px;">
							积分中心
						</view>
					</view>
					<view class="top6">
						<view class="img">
							<image src="../../../static/images/other/fapiaoguanli.png" mode=""></image>
						</view>
						<view class="zi" style="font-size: 13px;">
							发票管理
						</view>
					</view>
				</view>
				
			</view>
		</view>
	</view>
</template>

<script>
	import EmptyTop from "../../../components/public/EmptyTop/index.vue";
	import MenuLayout from "../../../components/public/MenuLayout/index.vue";
	import {
		mapState,
		mapGetters,
		mapActions
	} from "vuex";
	import manifest from "../../../manifest.json";
	export default {
		components: {
			EmptyTop,
			MenuLayout
		},
		data() {
			return {
				merchantInfo: uni.getStorageSync("merchantInfo"),
				kefuPhone: "15732136855",
				bb: [{
						id: "1",
						title: "我的余额",
						number: "999.00"
					},
					{
						id: "2",
						title: "积分",
						number: "999.00"
					},
					{
						id: "3",
						title: "优惠券",
						number: "666"
					},
				],
			};
		},
		computed: {
			...mapState({
				mainShop: state => state.user.mainShop
			}),
			...mapGetters({
				activeShop: "activeShop"
			}),
			btnList() {
				return [{
						title: "店铺管理",
						url: "shopList",
						showArrow: true
					},
					{
						title: "营业状态",
						url: "shopStatus",
						showArrow: true
					},
					{
						title: "打印机设置",
						url: "printer",
						showArrow: true
					},
					{
						title: "重置密码",
						showArrow: true,
						fun: () => {
							this.$goto("/pages/login/forget", {
								type: "reset"
							});
						}
					},
					// {
					//   title: "联系客服",
					//   url: "",
					//   showArrow: true,
					//   rightText: this.kefuPhone,
					//   fun: () => {
					//     uni.makePhoneCall({
					//       phoneNumber: this.kefuPhone
					//     });
					//   }
					// },
					// {
					//   title: "意见反馈",
					//   url: "feedback",
					//   showArrow: true
					// },
					{
						title: "关于",
						// url: "setting",
						rightText: manifest.versionName,
						showArrow: true
					},
					{
						title: "退出登录",
						url: "",
						showArrow: true,
						fun: () => {
							uni.showModal({
								content: "登出后将不能接单，确认退出登录？",
								success: res => {
									if (res.confirm) {
										this.logout().then(res => {
											uni.reLaunch({
												url: "/pages/login/login"
											});
										});
									}
								}
							});
						}
					}
				];
			}
		},
		methods: {
			...mapActions({
				logout: "logout"
			}),
			goto(item) {
				if (item.url) {
					this.$goto(item.url);
				} else if (item.fun) {
					item.fun();
				}
			},
			tiao(){
				console.log("gggg")
				uni.navigateTo({
					url:"/pages/person/components/wo"
				})
			},
		}
	};
</script>

<style scoped lang="scss">
	// .person-menu-list {
	// 	background-color: lightgray;
	// }
	.person-menu-list{
		width: 100%;
		height: 100vh;
			background-color: #f8f8f8;
	}
	.header {
		background-color: #007aff;
		width: 100%;
		display: flex;
		padding: 40rpx 20rpx;
		justify-content: space-between;
		padding-bottom: 80rpx;
		box-sizing: border-box;

		.left {
			display: flex;
			margin-left: 20rpx;box-sizing: border-box;

			.img {
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				margin-right: 20rpx;
				box-sizing: border-box;

				image {
					width: 100%;
					height: 100%;
					border-radius: 50%;
				}
			}

			.leftName {
				color: white;
				font-size: 26rpx;
				box-sizing: border-box;
				margin-top: 14rpx;
				box-sizing: border-box;

				.idName {
					font-size: 20rpx;
					color: lightgray;
					box-sizing: border-box;

					image {
						width: 26rpx;
						height: 26rpx;
						margin-left: 10rpx;
						margin-top: 8rpx;

					}
				}

			}
		}

		.right {
			width: 50rpx;
			height: 50rpx;
			margin-right: 20rpx;
			margin-top: 20rpx;

			image {
				width: 100%;
				height: 100%;
				border-radius: 50%;
			}
		}

	}

	.center {
		width: 92%;
		margin: 0 auto;
		margin-top: -60rpx;
		box-sizing: border-box;

		.b1 {
			width: 100%;
			padding: 40rpx 30rpx;
			background-color: white;
			border-radius: 20rpx;
			box-sizing: border-box;

			.first {
				display: flex;
				justify-content: space-between;

				.within1 {
					padding-left: 20rpx;
					padding-right: 80rpx;
					box-sizing: border-box;
					text-align: center;
					border-right: 1px solid #dedbdb;
				.title{
					font-size: 13px;
				}
				.number{
					color: black;
					margin-top: 8rpx;
					box-sizing: border-box;
				}
				}
				.within2 {
					padding-right: 60rpx;
					box-sizing: border-box;
					text-align: center;
					border-right: 1px solid #dedbdb;
				.title{
					font-size: 13px;
				}
				.number{
					color: black;
					margin-top: 8rpx;
					box-sizing: border-box;
				}
				}
				.within3 {
					padding-right: 40rpx;
					box-sizing: border-box;
					text-align: center;
				.title{
					font-size: 13px;
				}
				.number{
					color: black;
					margin-top: 8rpx;
					box-sizing: border-box;
				}
				}

			}
		}
		.b2{
			margin-top: 20rpx;
			border-radius: 30rpx;
			background-color: white;
			width: 100%;
			padding: 20rpx 30rpx;box-sizing: border-box;
			.shang{
				display: flex;
				justify-content: space-between;
				margin-bottom: 30rpx;
				.right{
					font-size: 30rpx;
					color: gray;
				}
			}
			.xia{
				display: flex;
				justify-content: space-around;
				.one1{
					padding: 10px 0px;
					text-align: center;
					.img{
						width: 50rpx;
						height: 50rpx;
						margin-left: 10rpx;
						box-sizing: border-box;
						image{
							width: 100%;
							height: 100%;
						}
					}
					.zi{
						margin-top: 20rpx;
						box-sizing: border-box;
						font-size: 13px;
					}
				}
				.one2{
					padding: 10px 0px;
					text-align: center;
					.img{
						width: 50rpx;
						height: 50rpx;
						margin-left: 10rpx;
						box-sizing: border-box;
						image{
							width: 100%;
							height: 100%;
						}
					}
					.zi{
						margin-top: 20rpx;
						box-sizing: border-box;
						font-size: 13px;
					}
				}
				.one3{
					padding: 10px 0px;
					text-align: center;
					.img{
						width: 50rpx;
						height: 50rpx;
						margin-left: 10rpx;
						box-sizing: border-box;
						image{
							width: 100%;
							height: 100%;
						}
					}
					.zi{
						margin-top: 20rpx;
						box-sizing: border-box;
					font-size: 13px;
					}
				}
				.one4{
					padding: 10px 0px;
					text-align: center;
					.img{
						width: 50rpx;
						height: 50rpx;
						margin-left: 10rpx;
						box-sizing: border-box;
						image{
							width: 100%;
							height: 100%;
						}
					}
					.zi{
						margin-top: 20rpx;
						box-sizing: border-box;
						font-size: 13px;
					}
				}
				.one5{
					padding: 10px 0px;
					text-align: center;
					.img{
						width: 50rpx;
						height: 50rpx;
						margin-left: 20rpx;
						box-sizing: border-box;
						image{
							width: 100%;
							height: 100%;
						}
					}
					.zi{
						margin-top: 20rpx;
						box-sizing: border-box;
						font-size: 13px;
					}
				}
			}
		}
		.b3{
			margin-top: 20rpx;
			border-radius: 30rpx;
			background-color: white;
			width: 100%;
			padding: 20rpx 30rpx;box-sizing: border-box;
			.shang{
				font-size: 34rpx;
			}
			.xia{
				display: flex;
				// justify-content: space-around;
				flex-wrap: wrap; //折行显示
				padding: 20rpx 10rpx;
				box-sizing: border-box;
				.top1{
					padding: 10px 0px;
					text-align: center;
					width: 25%;
					.img{
						margin-left: 40rpx;
						box-sizing: border-box;
						width: 60rpx;
						height: 60rpx;
						margin-bottom: 10rpx;
						image{
							width: 100%;
							height: 100%;
						}
					}
					
				}
				.top2{
					padding: 10px 0px;
					width: 25%;
					text-align: center;
					.img{
						margin-left: 42rpx;
						box-sizing: border-box;
						width: 60rpx;
						height: 60rpx;
						margin-bottom: 10rpx;
						image{
							width: 100%;
							height: 100%;
						}
					}
					
				}
				.top3{
					padding: 10px 0px;
					width: 25%;
					text-align: center;
					.img{
						margin-left: 46rpx;
						box-sizing: border-box;
						width: 60rpx;
						height: 60rpx;
						margin-bottom: 10rpx;
						image{
							width: 100%;
							height: 100%;
						}
					}
					
				}
				.top4{
					padding: 10px 0px;
					width: 25%;
					text-align: center;
					.img{
						margin-left: 40rpx;
						box-sizing: border-box;
						width: 60rpx;
						height: 60rpx;
						margin-bottom: 10rpx;
						image{
							width: 100%;
							height: 100%;
						}
					}
					
				}
				.top5{
					padding: 10px 0px;
					margin-top: 20rpx;
					box-sizing: border-box;
					width: 25%;
					text-align: center;
					.img{
						margin-left: 40rpx;
						box-sizing: border-box;
						width: 60rpx;
						height: 60rpx;
						margin-bottom: 10rpx;
						image{
							width: 100%;
							height: 100%;
						}
					}
					
				}
				.top6{
					padding: 10px 0px;
					width: 25%;
					text-align: center;
					margin-top: 20rpx;
					box-sizing: border-box;
					.img{
						margin-left: 50rpx;
						box-sizing: border-box;
						width: 60rpx;
						height: 60rpx;
						margin-bottom: 10rpx;
						image{
							width: 100%;
							height: 100%;
						}
					}
					
				}
			}
		}
	
	}
</style>